<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>化石索引距离图</title>
    <style>
        #map{
            height:545px;
        }
    </style>
    <link  type="text/css"  rel="stylesheet"  href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"/>
    <link  type="text/css"  rel="stylesheet" href="./lib/layui.css">
</head>
<body>
<div class="layui-main">
<!--<div>-->
    <!--Check-->
    <!--</div>-->
    <!--<div class="layui-form" lay-filter="myDiv" style="margin: 50px 700px 50px 20px; padding: 20px 40px 0px";>-->
    <!--<select name="" id="" lay-filter="mySelect">-->
    <!--<option value="early">early T</option>-->
    <!--<option value="mid">mid T</option>-->
    <!--<option value="late">late T</option>-->
    <!--</select>-->
    <!--</div>-->
    <div>
        设置阈值
    </div>
    <div id="setline" style="margin: 50px 700px 50px 20px; padding: 20px 40px 0px";>
    </div>
    <button onclick="BC()">确定 </button>
    <div id="map" />
</div>

<script src="./lib/layui.all.js"></script>
<script src="./lib/jquery.js"></script>
<script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>
<script src="leaflet.markercluster.js"></script>


<script>

    var map = new L.map('map',{
        center: new L.LatLng(39.86,116.45),
        zoom: 10
    });

    L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
        maxZoom: 18
    }).addTo(map);

        <!--var layer = layui.layer;-->

        <!--layer.msg('hello');-->
    <!--});-->

    // layer.alert("该阈值下无数据");
    let thevalue=0.1;
    layui.use('slider', function(){
        var slider = layui.slider;
        //渲染
        slider.render({
            elem: '#setline',  //绑定元素
            type: 'default',
            value: 20,
            tips: 'true',
            setTips: function(value){
                thevalue = value / 200.0;
                //  console.log(thevalue);
                return (thevalue);
            },
            change: function (value) {
                //回调函数里可以写一些对value的操作
                thevalue = value ;
                return (thevalue);
            },
        });
        // console.log(thevalue);
    });
    var polyLineJson;
    var polylineLayer =[];
        function  BC(){
            $.ajax({
                type: "get",
                // url: "http://101.132.237.69:8081/distance/"+thevalue,
                url: "http://127.0.0.1:8080/distance/"+thevalue,
                success: function (data) {
                    console.log("成功",data);
                    for(var i=0;i<polylineLayer.length;i++)
                    {
                        map.removeLayer(polylineLayer[i]);
                        console.log("删除数据",i);
                    }
                    if(data==0)
                    {
                        console.log("该阈值下无数据");
                        layui.use(['layer'], function(){
                            var layer = layui.layer
                            layer.alert("该阈值下无数据")

                        });

                    }
                    for(var i=0;i<data.length;i++)
                    {
                        polylineLayer[i]=L.polyline(data[i].polylineData, {weight:data[i].width}).addTo(map);
                    }
                },
                error: function () {
                    console.log("polyline失败");
                }
            });
        }

    </script>
</body>
</html>
